import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Select, Input, Checkbox, Spin, message } from 'antd';
import styles from './index.less';
import qdbuttom from '@/assets/account/robotSetup/qdbuttom.png';
import qxbuttom from '@/assets/account/robotSetup/qxbuttom.png';

const Search = Input.Search;
const FormItem = Form.Item;
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;

class Accredit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedList: [],
      indeterminate: false,
      checkAll: false,
      roleId: this.props.itemListObj.roleId,
      login: false,
      sysList: [],
      tca: false,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    this.sysgetmenusByUserId();
  }

  sysgetmenusByUserId = () => {
    const { dispatch, currentUser } = this.props;

    let obj = {};
    obj = { userId: currentUser.uid, robotId: currentUser.uid };
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'authorization/sysgetmenusByUserId',
        payload: obj,
        callback: res => {
          console.log('列表数据123', res);
          this.setState({ sysList: res.data });
        },
      });
    });
  };

  panduan = val => {
    // console.log(val);
    const { sysList } = this.state;
    let a = sysList === undefined ? [] : sysList;
    let res = a.some(item => {
      return item === val;
    });
    return !res;
  };

  unique10 = arr => {
    return Array.from(new Set(arr));
  };


  // 多选框
  onChangeCheckbox = checkedList => {
    console.log(checkedList);
    setTimeout(() => {
      const { tca } = this.state;
      console.log(tca);
      switch (tca) {
        case '机器人管理':
          console.log('1');
          let b = checkedList.filter(item => {
            return item !== '机器人设置' && item !== '协作开发' && item !== '部署配置';
          });
          let a = this.unique10(b);
          this.setState({
            checkedList: a,
            tca: false,
          });
          this.props.itemObjfa(a);
          break;
        case '知识库管理':
          console.log('2');
          let bb = checkedList.filter(item => {
            return item !== '知识总览' && item !== '知识库分享' && item !== '版本维护';
          });
          let aa = this.unique10(bb);

          this.setState({
            checkedList: aa,
            tca: false,
          });
          this.props.itemObjfa(aa);
          break;
        case '机器人管理1':
          let objbable = [...['机器人设置', '协作开发', '部署配置'], ...checkedList];

          this.setState({
            checkedList: this.unique10(objbable),
            tca: false,
          });
          this.props.itemObjfa(objbable);
          break;
        case '知识库管理1':
          let objzsk = [...['知识总览', '知识库分享', '版本维护'], ...checkedList];

          this.setState({
            checkedList: this.unique10(objzsk),
            tca: false,
          });
          this.props.itemObjfa(objzsk);
          break;
        case '通用配置1':
          let objtypz = [...['实体管理', '词槽管理', '接口管理'], ...checkedList];

          this.setState({
            checkedList: this.unique10(objtypz),
            tca: false,
          });
          this.props.itemObjfa(objtypz);
          break;
        case '系统管理1':
          let objxtgl = [...['用户管理', '角色管理', '权限管理'], ...checkedList];

          this.setState({
            checkedList: this.unique10(objxtgl),
            tca: false,
          });
          this.props.itemObjfa(objxtgl);
          break;
        case '运营分析1':
          let objyyl = [...['机器人总览分析', '接口调用情况分析', '对话流程分析','知识点数量分析', 
          '多轮对话总体情况分析', '多轮对话失败原因分析',
          '问答任务情况分析', '未知问题分析', '未知问题知识点聚合分析'], ...checkedList];

          this.setState({
            checkedList: this.unique10(objyyl),
            tca: false,
          });
          this.props.itemObjfa(objyyl);
          break;
        case '知识库管理1':
          let objzsks = [...['知识总览', '知识库分享', '版本维护'], ...checkedList];

          this.setState({
            checkedList: this.unique10(objzsks),
            tca: false,
          });
          this.props.itemObjfa(objzsks);
          break;
        case '通用配置':
          console.log('3');
          let topa = checkedList.filter(item => {
            return item !== '实体管理' && item !== '词槽管理' && item !== '接口管理';
          });
          let topb = this.unique10(topa);

          this.setState({
            checkedList: topb,
            tca: false,
          });
          this.props.itemObjfa(topb);
          break;
        case '系统管理':
          console.log('4');
          let dob = checkedList.filter(item => {
            return item !== '用户管理' && item !== '角色管理' && item !== '权限管理';
          });
          let doc = this.unique10(dob);

          this.setState({
            checkedList: doc,
            tca: false,
          });
          this.props.itemObjfa(doc);
          break;
        case '运营分析':
          let yy = checkedList.filter(item => {
            return item !== '机器人总览分析' && item !== '接口调用情况分析' && item !== '对话流程分析'
            && item !== '知识点数量分析' && item !== '多轮对话总体情况分析' && item !== '多轮对话失败原因分析' 
            && item !== '问答任务情况分析' && item !== '未知问题分析' && item !== '未知问题知识点聚合分析';
          });
          let docyy = this.unique10(yy);

          this.setState({
            checkedList: docyy,
            tca: false,
          });
          this.props.itemObjfa(docyy);
          break;
        default:
          console.log('5');
          checkedList.map(item => {
            if (item === '机器人设置' || item === '协作开发' || item === '部署配置') {
              checkedList.push('机器人管理');
            }
            if (item === '知识总览' || item === '知识库分享' || item === '版本维护') {
              checkedList.push('知识库管理');
            }
            if (item === '实体管理' || item === '词槽管理' || item === '接口管理') {
              checkedList.push('通用配置');
            }
            if (item === '用户管理' || item === '角色管理' || item === '权限管理') {
              checkedList.push('系统管理');
            }
            if (item === '机器人总览分析' || item === '接口调用情况分析' || item === '对话流程分析' 
            || item === '知识点数量分析' || item === '多轮对话总体情况分析' || item === '多轮对话失败原因分析' 
            || item === '问答任务情况分析' || item === '未知问题分析' || item === '未知问题知识点聚合分析') {
              checkedList.push('运营分析');
            }
          });
          let aaa = this.unique10(checkedList);
          console.log(aaa);
          this.setState({
            checkedList: aaa,
          });
          this.props.itemObjfa(aaa);
          break;
      }
    }, 100);
  };

  onCheckAllChangea = e => {
    console.log(e.target.checked);
    const { checkedList } = this.state;
    if (e.target.checked) {
      this.setState({
        tca: '机器人管理1',
      });
    } else {
      this.setState({
        tca: '机器人管理',
      });
    }
  };

  onCheckAllChangeb = e => {
    console.log(e.target.checked);
    const { checkedList } = this.state;
    if (e.target.checked) {
      this.setState({
        tca: '知识库管理1',
      });
    } else {
      this.setState({
        tca: '知识库管理',
      });
    }
  };

  onCheckAllChangec = e => {
    console.log(e.target.checked);
    const { checkedList } = this.state;
    if (e.target.checked) {
      this.setState({
        tca: '通用配置1',
      });
    } else {
      this.setState({
        tca: '通用配置',
      });
    }
  };

  onCheckAllChangedA = e => {
    const { checkedList } = this.state;
    if (e.target.checked) {
      this.setState({
        tca: '运营分析1',
      });
    } else {
      this.setState({
        tca: '运营分析',
      });
    }
  }

  onCheckAllChanged = e => {
    console.log(e.target.checked);
    const { checkedList } = this.state;
    if (e.target.checked) {
      this.setState({
        tca: '系统管理1',
      });
    } else {
      this.setState({
        tca: '系统管理',
      });
    }
  };

  operation = () => {
    this.setState({ login: true });
    const { dispatch, currentUser, itemObj } = this.props;
    let itemobjNew = this.unique10([...['首页', '机器人总览'], ...itemObj]);
    const { checkedList, roleId } = this.state;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'authorization/updateAuthorization',
        payload: { roleId, menuIds: itemobjNew, userId: currentUser.uid },
        callback: res => {
          if (!res.code) {
            console.log('菜单列表', res);
            message.success(`${res.msg}`);
            this.setState({
              itemObj: res.data,
              login: false,
            });
          }
        },
      });
    });
  };

  // 数组去重
  unique10 = arr => {
    return Array.from(new Set(arr));
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { itemObj } = this.props;
    let itemobjNew = this.unique10([...['首页', '机器人总览'], ...itemObj]);

    // this.setState({checkedList:itemObj})
    // console.log(itemobjNew, this.state.checkedList);
    // 多选框参数
    return (
      <div>
        <Spin spinning={this.props.twospin}>
          <Spin spinning={this.state.login}>
            <div className={styles.der}>
              <Form className="zdyfroma" layout="horizontal">
                <FormItem label="菜单名称" className={styles.wardfrom}>
                  <CheckboxGroup
                    defaultValue={['首页', '机器人']}
                    value={itemobjNew}
                    style={{ width: '100%' }}
                    onChange={this.onChangeCheckbox}
                  >
                    <Row style={{ marginBottom: 20 }} gutter={20}>
                      <Col span={3}>
                        <Checkbox disabled checked value="首页">
                          首页
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox disabled checked value="机器人总览">
                          机器人总览
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox
                          onChange={this.onCheckAllChangea}
                          disabled={this.panduan('机器人管理')}
                          value="机器人管理"
                        >
                          机器人管理
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox
                          onChange={this.onCheckAllChangeb}
                          disabled={this.panduan('知识库管理')}
                          value="知识库管理"
                        >
                          知识库管理
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('对话工坊')} value="对话工坊">
                          对话工坊
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox
                          onChange={this.onCheckAllChangec}
                          disabled={this.panduan('通用配置')}
                          value="通用配置"
                        >
                          通用配置
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox onChange={this.onCheckAllChangedA} disabled={this.panduan('运营分析')} value="运营分析">
                          运营分析</Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox onChange={this.onCheckAllChanged} disabled={this.panduan('系统管理')} value="系统管理">
                          系统管理
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={6} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('机器人设置')} value="机器人设置">
                          机器人设置
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('知识总览')} value="知识总览">
                          知识总览
                        </Checkbox>
                      </Col>
                      <Col span={3} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('实体管理')} value="实体管理">
                          实体管理
                        </Checkbox>
                      </Col>
                      <Col span={3} >
                        <Checkbox disabled={this.panduan('机器人总览分析')} value="机器人总览分析">
                          机器人总览分析
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('用户管理')} value="用户管理">
                          用户管理
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={6} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('协作开发')} value="协作开发">
                          协作开发
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('知识库分享')} value="知识库分享">
                          知识库分享
                        </Checkbox>
                      </Col>
                      <Col span={3} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('词槽管理')} value="词槽管理">
                          词槽管理
                        </Checkbox>
                      </Col>
                      <Col span={3} >
                        <Checkbox disabled={this.panduan('接口调用情况分析')} value="接口调用情况分析">
                          接口调用情况分析
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('角色管理')} value="角色管理">
                          角色管理
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={6} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('部署配置')} value="部署配置">
                          部署配置
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('版本维护')} value="版本维护">
                          版本维护
                        </Checkbox>
                      </Col>
                      <Col span={3} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('接口管理')} value="接口管理">
                          接口管理
                        </Checkbox>
                      </Col>
                      <Col span={3} >
                        <Checkbox disabled={this.panduan('对话流程分析')} value="对话流程分析">
                          对话流程分析
                        </Checkbox>
                      </Col>
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('权限管理')} value="权限管理">
                          权限管理
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={18} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('知识点数量分析')} value="知识点数量分析">
                          知识点数量分析
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={18} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('多轮对话总体情况分析')} value="多轮对话总体情况分析">
                          多轮对话总体情况分析
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={18} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('多轮对话失败原因分析')} value="多轮对话失败原因分析">
                          多轮对话失败原因分析
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={18} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('问答任务情况分析')} value="问答任务情况分析">
                        问答任务情况分析
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={18} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('未知问题分析')} value="未知问题分析">
                          未知问题分析
                        </Checkbox>
                      </Col>
                    </Row>
                    <Row
                      style={{ position: 'relative', left: '30px', marginBottom: 20 }}
                      gutter={20}
                    >
                      <Col span={18} />
                      <Col span={3}>
                        <Checkbox disabled={this.panduan('未知问题知识点聚合分析')} value="未知问题知识点聚合分析">
                          未知问题知识点聚合分析
                        </Checkbox>
                      </Col>
                    </Row>
                  </CheckboxGroup>
                </FormItem>
              </Form>
              <div className={styles.flex}>
                <div>
                  {/* <img  src={qxbuttom} style={{ marginRight: 50 }} /> */}
                  <img onClick={this.operation} src={qdbuttom} />
                </div>
              </div>
            </div>
          </Spin>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(Accredit));
